<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<listTpml :data="pageData" @onCommand="handleCommand" ref="listTpml"></listTpml>
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
import listTpml from "@/view/components/listTmpl";
import { getInstStatus } from '@/service/swagger/AcAppInstController';
import { destroy, start, stop , deleteSL } from "@/service/swagger/InstanceController";
import { appStatusFilter } from '@/filters/status/index';
import { hostipFilter } from '@/filters/type/index';
import { listenner } from "@/utils/statuslistener";
import { checkStatus } from '@/utils/common.js'

export default {
	components: {
		listTpml,
	},
	data() {
		return {
			pageData: {
				pageTitle: "组件管理",
				id: this.$route.query.id,
				filterOption: [
					{
						label: "名称", // label名
						paramsName: "instName", // 出参name值
						defaultValue: this.$route.query.name? this.$route.query.name : "", // 出参默认值
						componentsName: "nameInput", // 组件名
					},
					{
						label: "状态", // label名
						paramsName: "status", // 出参name值
						defaultValue: this.$route.query.status||this.$route.query.status==0 ? this.$route.query.status : "", // 出参默认值
						componentsName: "shiliStatusSelect", // 组件名
					}
				],
				// 列表table 设置
				listOption: {
					// 列表api
					listApi: {
						url: "/appcloud-data/api/appInst/getAppInstList",
						type: "POST",
						params: {
							templateId: this.$route.query.id,
							templateType: 2,
						}
					},
					// 表头设置
					header: [{
						label: "实例名称",
						width: "200",
						propName: "instName",
						align: "left",
					}, {
						label: "主机IP",
						width: "150",
						propName: "hostsInfo",
							html: (row) => {
							return  hostipFilter(row.hostsInfo)
						},
					}, {
						label: "版本号",
						width: "",
						propName: "appVersion",
					},{
						label: "部署类型",
						width: "",
						html:(row)=>{
							if(row.deployType == 1){
								return `<span>容器</span>`
							}else{
								return `<span>裸应用</span>`
							}
						}
					}, {
						label: "应用类型",
						width: "",
						propName: "appType",
					},
					{
						label: "应用名",
						width: "",
						propName: "appName",
					},
					{
						label: "创建时间",
						width: "180",
						propName: "createTime",
					}, {
						label: "状态",
						width: "",
						propName: "status",
						html: (row) => {
							return appStatusFilter(row.status)
						},
					}, {
						label: "操作",
						width: "",
						btns: [
							{
								label: "详情",
								commandName: "/sl/zjdetail"
							},
						],
						btnGroups: [
							{
								label: "启动",
								commandName: "start",
								show: (row) => {
									return row.status == 2;//实际状态是已停止

								}
							},
							{
								label: "停止",
								commandName: "stop",
								show: (row) => {
									return row.status == 1;//实际状态是运行中
								}
							},
							{
								label: "销毁",
								commandName: "destory",
								show: (row) => {
									return row.status == 2;//实际状态是已停止
								}
							}, {
								label: "删除",
								commandName: "delete",
								show: (row) => {
									return row.status == 4;//实际状态是异常
								}
							}]
					}]
				}
			}
		}

	},
	methods: {
		handleCommand(command, row, index) {
			console.log(command)
			if (command && this[command]) {
				this[command](row, index)
			} else {
				this.$router.push({
					path: command,
					query: {
						appType: 'zujian',
						id: row ? row.instId : '',
						instConf: row.instConf,
					}
				})
			}
		},
		refresh() {
			this.$refs.listTpml.search();
		},
		listLoaded() {

		},
		// 启动
		start(row) {
			this.$confirm("确定启动该组件？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					start({ id: row.instId }).then(ret => {
						if (ret && ret.code == 0) {
							this.refresh()
						}
					})
				})
		},
		// 停止
		stop(row) {
			this.$confirm("确定停止该组件？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					stop({ id: row.instId }).then(ret => {
						if (ret && ret.code == 0) {
							this.refresh()
						}
					})
				})
		},
		// 销毁
		destory(row) {
			this.$confirm("确定销毁该组件？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					destroy({ id: row.instId }).then(ret => {
						if (ret && ret.code == 0) {
							this.refresh()
						}
						this.refresh()
					})
				})
		},
		// 删除
		delete(row) {
			this.$confirm("确定删除该组件？", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			})
				.then(() => {
					deleteSL(row.instId).then(ret => {
						if (ret && ret.code == 0) {
							this.refresh()
							this.$message({ showClose: true, message: '删除成功！', type: 'success' })
						}
					})
				})
		},
		//远程链接
		Remotelink(){
      let routeUrl = this.$router.resolve({})
      window.open(routeUrl.href, '_blank');
		},
		listLoaded(tableData) {
			let _this = this
			checkStatus(tableData, _this, appStatusFilter, getInstStatus)
		},
	}
}
</script>

<style>
</style>